<template>
  <div class="rank-common">
    <table class="rank-table">
      <thead class="table-head rank-total">
      <tr class="rank-table-row">
        <th class="table-cell" v-for="(title, index) in titles"  @click="changeRank(title, index)">
          {{title.name}}
          <span class="sort-icon" v-if="title.isRank">
              <i :class="{active: title.rankFlag ===0}" class="iconfont icon-sort-up"></i>
              <i :class="{active: title.rankFlag ===1}" class="iconfont icon-sort-down"></i>
            </span>
        </th>
      </tr>
      </thead>
      <tbody class="table-body page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }"
             v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
      <tr class="rank-table-row rank-list bg-white" v-for="item in rankList">
        <td class="table-cell" v-for="(pro, index) in rankKey">
          {{item[pro]}} <span v-if="(index==rankKey.length-1)&&per">%</span>
        </td>
      </tr>
      <tr class="rank-table-row">
        <td class="p20" v-show="loading && !loadingEnd"> 加载中...  </td>
        <td class="p20" v-show="loadingEnd"> 没有数据了！</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  import constant from '@/common/constant';
  import api from '@/common/api/rankList';
  export default {
    /**
     * @module common/plugins/rankList
     * @author lxr
     * @description 排序组件
     * @example <dc-rank style="position: absolute;top: 226px;bottom: 0;" ref="saleRank" :titles="[{name: '销量', isRank: true, rankFlag: 1, rankFlayType: 0}]" :rankKey="['foodName', 'foodSalesVolume']" :param="param" :url="'getTakeAwayDish'"></dc-rank>
     */
    /**
     * @property {String}  url          - 调用查询列表接口函数名字
     * @property {Object}  param          - 列表查询接口查询入参
     * @property {Array}  rankKey          - 组件横向循环所需的属性名
     * @property {Array}  titles          - 组件头部的名称，可以设置是否显示排序按钮和排序的属性
     */
    props: {
      per: {
        type: Boolean,
        default: false
      },
      url: String,
      param: Object,
      rankKey: Array,
      titles: Array
    },
    components: {
    },
    created () {
      let pager = JSON.parse(JSON.stringify(constant.pager));
      this.param['page'] = pager.page;
      this.param['limit'] = pager.limit;
      this.param.sortFlag = 1; //0升序，1降序，默认降序
      this.param.sortItemFlag = 0;  //这个字段表示的是哪个排序改变了
    },
    data () {
      return {
        wrapperHeight: 0,
        loading: true,
        loadingEnd: false,
        rankList: []
      };
    },
    methods: {
      loadMore () {
        this.loading = true;
        this.loadingEnd = false;
        setTimeout(() => {
          this.getList();
        }, 300);
      },
      getList () {
        api[this.url](this.param).then(res => {
          if (res) {
            this.rankList = this.rankList.concat(res);
            if (res.length === this.param.limit) {
              this.param.page++;
              this.loading = false;
            } else {
              this.loadingEnd = true;
            }
          }
        });
      },
      changeRank (item, index) {
        if (item.isRank) {
          if (item.rankFlag === 0) {  //0表示升序，1表示降序
            item.rankFlag = 1;
            this.param.sortFlag = 1;
          } else if (item.rankFlag === 1) {
            item.rankFlag = 0;
            this.param.sortFlag = 0;
          } else if (item.rankFlag === null) {
            for (let i = 0; i < this.titles.length; i++) {
              if (this.titles[i].isRank) {
                this.titles[i].rankFlag = null;  //排序升降一个都不选中
              };
            };
            this.titles[index].rankFlag = 1;
            this.param.sortFlag = 1;
          };
          this.param.sortItemFlag = item.rankFlayType;
          this.changeList();
        };
      },
      changeList () {
        this.rankList = [];
        this.param.page = 1;
        this.loadMore();
      }
    },
    mounted () {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    }
  };
</script>
<style lang="scss" scoped>
  @import "../assets/css/variable";
  .rank-common{
    /*overflow-x: auto;*/
    .rank-table{
      border-collapse: collapse;
      width: 100%;
      .table-head{
        /*width: calc( 100% - 1px );*/
        .rank-table-row{
          .table-cell{
            line-height: px2rem(80px);
          }
        }
      }
      .table-body{
        display:block;
        /*height:195px;*/
        overflow-y:scroll;
      }
      .rank-table-row{
        display:table;
        width:100%;
        table-layout:fixed;
        border-top: 1px solid #E6E6E6;
        .table-cell{
          line-height: px2rem(100px);
          white-space:nowrap
        }
      }
      .rank-list:nth-child(2n+1){
        background:#FAFAFA !important;
      }
    }
    .sort-icon{
      color: #aaa;
      position: relative;
      i{
        position: absolute;
        font-size: px2rem(24px);
        left: px2rem(4px);
      }
      .icon-sort-up{
        top: px2rem(-6px);
      }
      .icon-sort-down{
        top: px2rem(10px);
      }
    }
    .active{
      color: $theme-color;
    }
    .rank-total{
      color: #666666;
    }
  }
</style>
